<script setup lang="ts">
import ContentTitle from '~/components/ContentTitle/index.vue'
import ItemAlbum from '~/components/ItemAlbum/index.vue'
import PaginationAlbum from '~/components/PaginationAlbum/index.vue'
import APICommon from '~/api/common'
import type { Module } from '~/api/common/types'

definePageMeta({
    showSmallSearchBox: true,
})

const $router = useRouter()
const $route = useRoute()

const loading = shallowRef<boolean>(false)

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 16
})

const list = ref<Module[]>([])

const total = shallowRef<number>(0)

function getModule() {
    loading.value = true
    const queryData = {
        ...$route.query,
        more: 1
    }
    APICommon.getModule(queryData, queryParams.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

function onClickBtn(id: number) {
    $router.push({
        path: `/video-gather/${id}`
    })
}

onMounted(() => {
    getModule()
})

</script>

<template>
    <div class="video-album">
        <ContentTitle title="视频全部专辑" style="margin: 28px 0;" />
        <div v-loading="loading">
            <el-empty description="暂无内容" v-if="list.length == 0" />
            <div class="video-content">
                <ItemAlbum v-for="item in list" :key="item.id" :title="item.title" :image="item.image"
                    @on-click-btn="onClickBtn(item.id)" />
            </div>
        </div>
        <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
            @get-list="getModule" />
    </div>
</template>

<style lang="less" scoped>
.video-album {
    box-sizing: border-box;
    width: 1340px;
    padding: 0 20px;
    margin: 0 auto;

    .video-content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 28px;
        margin-bottom: 30px;
    }
}
</style>
